<template>
  <div class="left-two">

  </div>
</template>

<script>
export default {
  name: "leftTwo"

}
</script>

<style scoped lang="less">
.one {
  display: flex;
  .one-item {
    display: flex;
    align-items: center;
    position: relative;
    width: 222px;
    margin-left: 30px;

    .left,
    .right {
      width: 52px;
      height: 93px;
      position: absolute;
      top: 0;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .left {
      left: 0;
      background: url("../../../assets/images/onel.png") center center no-repeat;
    }

    .right {
      right: 0;
      background: url("../../../assets/images/oner.png") center center no-repeat;
    }

    .middle {
      height: 93px;
      border-top: 1px solid #202cd3;
      border-bottom: 1px solid #202cd3;
      width: 60%;
      margin-left: 52px;
      margin-right: 52px;
      position: relative;
      .title {
        font-size: 18px;
        font-weight: 400;
        color: #00caff;
        position: absolute;
        left: -30px;
        top: 10px;
        z-index: 1;
      }
      .num {
        font-family: DS-Digital;
        font-weight: normal;
        color: #00faa8;
        position: absolute;
        right: -35px;
        bottom: 8px;
        z-index: 1;
        .big {
          font-size: 40px;
        }
        .small {
          font-size: 16px;
        }
      }
    }
  }
}
</style>